<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Accordion</title>
  <link rel="stylesheet" href="../dist/aqua.css" />
  <link rel="stylesheet" href="./styles/demo.css" />
</head>

<body>
  <ul class="accordion">
    <li class="accordion-item" id="item1">
      <a href="#item1">Item 1<i class="chevron-icon down circle accordion-toggle"></i></a>
      <div class="accordion-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam
          dignissim diam quis enim. Ut lectus arcu bibendum at varius vel
          pharetra vel turpis.
        </p>
      </div>
    </li>
    <li class="accordion-item" id="item2">
      <a href="#item2">Item 2<i class="chevron-icon down circle accordion-toggle"></i></a>
      <div class="accordion-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam
          dignissim diam quis enim. Ut lectus arcu bibendum at varius vel
          pharetra vel turpis.
        </p>
      </div>
    </li>
    <li class="accordion-item" id="item3">
      <a href="#item3">Item 3<i class="chevron-icon down circle accordion-toggle"></i></a>
      <div class="accordion-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam
          dignissim diam quis enim. Ut lectus arcu bibendum at varius vel
          pharetra vel turpis.
        </p>
      </div>
    </li>
    <li class="accordion-item" id="item4">
      <a href="#item4">Item 4<i class="chevron-icon down circle accordion-toggle"></i></a>
      <div class="accordion-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam
          dignissim diam quis enim. Ut lectus arcu bibendum at varius vel
          pharetra vel turpis.
        </p>
      </div>
    </li>
  </ul>
</body>

</html>